<template>
  <div class="all">
   <el-card class="card">
     <el-scrollbar height="500px">
     <div v-for="collection in collections" :key="collection.newsId" class="new">
       <div class="left"><img :src="collection.cover" ></div>
       <div class="right">
         <div class="title"> 【 {{collection.newsType}} 】  {{collection.title}}</div>
         <div class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{collection.newsContent}}</div>
         <div class="msg">
             {{ collection.userId }} | {{ collection.publishTime }}
           <div class="uncollect" @click="unCollect(collection)">取消收藏</div>
         </div>
       </div>
     </div>
     </el-scrollbar>
     <div class="footer">
       <el-pagination
           :page-size="3"
           :pager-count="1"
           layout="prev, pager, next" :total="collectionsObject?.totals"
           @current-change="handleCurrentChange"/>
     </div>
   </el-card>
  </div>
</template>

<script setup>
import { reactive,onMounted,ref } from "vue";
import { collectionList ,collectDelete} from "../../api/collect";

const collectionsObject = ref()
const collections = ref()
onMounted(async() => {
  await fetchData()
})
const unCollect = async(collection) => {
  try {
    let id = parseInt(newsId)
    const res = collectDelete(collection)
    console.log(res)
  } catch(error) {
    Promise.reject(error)
  }
  await fetchData()
}
const fetchData = async () => {
  try {
    const { data } =  await collectionList(0,8)
    collectionsObject.value = data.data
    collections.value = collectionsObject.value.rows

    console.log('新闻',collectionsObject.value)
  } catch (error) {
    Promise.reject(error)
  }
}
</script>

<style scoped>
.all{
  padding:10px;
  height:100vh;
  background-image: url('@/assets/user_background.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.card {
  padding:10px;
  margin: 0 auto;
  margin-top: 8%;
  width:1000px;
  height:600px;
}
.new {
  width:90%;
  height:140px;
  margin:0 auto;
  display: flex;
  margin-bottom: 20px;
}
.left {
  display: inline-block;
  height:100%;
  width:240px;
  /*border: 1px solid blue;*/
  margin-right: 20px;
}
img {
  width:100%;
  height:100%;
}
.right {
  padding-top: 10px;
  /*border: 1px solid red;*/
  display: inline-block;
  height:100%;
  width:70%;
  line-height: 1.5;
}
.content{
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#828181;
  font-size: 12px;
}
.msg {
  margin-top: 20px;
  color:#828181;
  font-size: 12px;
}
.uncollect {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}
.uncollect:hover {
  color: red;
}
.footer {
  margin-top: 25px;
  margin-left: 45%;
}
</style>
